<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>图书管理系统</title>
    <meta name="description" content="AppUI is a Web App Bootstrap Admin Template created by pixelcave and published on Themeforest">
    <meta name="author" content="pixelcave">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="../static/img/favicon.png">
    <link rel="apple-touch-icon" href="../static/img/icon57.png" sizes="57x57">
    <link rel="apple-touch-icon" href="../static/img/icon72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="../static/img/icon76.png" sizes="76x76">
    <link rel="apple-touch-icon" href="../static/img/icon114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="../static/img/icon120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="../static/img/icon144.png" sizes="144x144">
    <link rel="apple-touch-icon" href="../static/img/icon152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="../static/img/icon180.png" sizes="180x180">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/plugins.css">
    <link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="../static/css/themes.css">
    <link rel="stylesheet" href="../css/css1/index/css/bootstrap.css">
    <script type="text/javascript" src="../css/css1/index/jquery.js"></script>
    <script type="text/javascript" src="../css/css1/index/js/bootstrap.js"></script>
    <style>
        .container{
            margin-left: 0px;
        }

        .tab-pane.active{
            margin-top: 0px;
        }
    </style>
    <script src="../static/js/vendor/modernizr-3.3.1.min.js"></script>
</head>
<body>
<div id="page-wrapper" class="page-loading">
    <div class="preloader">
        <div class="inner">
            <div class="preloader-spinner themed-background hidden-lt-ie10"></div>
            <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
        </div>
    </div>
    <div id="page-container" class="header-fixed-top sidebar-visible-lg-full">
        <div id="sidebar">
            <div id="sidebar-brand" class="themed-background">
                <a href="" class="sidebar-title">
                    <i class="fa fa-cube"></i> <span class="sidebar-nav-mini-hide">图书管理系统</span>
                </a>
            </div>
            <div id="sidebar-scroll">
                <!-- Sidebar Content -->
                <div class="sidebar-content">
                    <!-- Sidebar Navigation -->
                    <ul class="sidebar-nav">
                        <li>
                            <a th:href="@{/index(id=${user.id})}" class=" active"><i class="gi gi-compass sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">首页</span></a>
                        </li>
                        <li class="sidebar-separator">
                            <i class="fa fa-ellipsis-h"></i>
                        </li>
                        <li>
                            <a th:href="@{/book/selectAll(current=1,id=${user.id})}"><i class="fa fa-rocket sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">图书查询</span></a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-nav-menu"><i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-airplane sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">我的借还</span></a>
                            <ul>
                                <li>
                                    <a th:href="@{/lend/selectSome(current=1,id=${user.id})}">我要还书</a>
                                </li>
                                <li>
                                    <a th:href="@{/lend/selectAll(current=1,id=${user.id})}">借还管理</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="sidebar-nav-menu"><i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-more_items sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">图书挂失</span></a>
                            <ul>
                                <li>
                                    <a th:href="@{/lend/toUpdateOne(current=1,id=${user.id})}">挂失</a>
                                </li>
                                <li>
                                    <a th:href="@{/lend/toUpdateTwo(current=1,id=${user.id})}">解挂</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a th:href="@{/user/me(id=${user.id})}"></i><i class="fa fa-gift sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">个人信息</span></a>
                        </li>
                        <li>
                            <a th:href="@{/user/toPwd(id=${user.id})}"><i class="gi gi-inbox sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">密码修改</span></a>
                        </li>
                    </ul>
                    <!-- END Sidebar Navigation -->
                </div>
                <!-- END Sidebar Content -->
            </div>
            <!-- END Wrapper for scrolling functionality -->


        </div>
        <!-- END Main Sidebar -->

        <!-- Main Container -->
        <div id="main-container">

            <header class="navbar navbar-inverse navbar-fixed-top">
                <!-- Left Header Navigation -->
                <ul class="nav navbar-nav-custom">
                    <!-- Main Sidebar Toggle Button -->
                    <li>
                        <a href="javascript:void(0)" onclick="App.sidebar('toggle-sidebar');this.blur();">
                            <i class="fa fa-ellipsis-v fa-fw animation-fadeInRight" id="sidebar-toggle-mini"></i>
                            <i class="fa fa-bars fa-fw animation-fadeInRight" id="sidebar-toggle-full"></i>
                        </a>
                    </li>
                    <li class="hidden-xs animation-fadeInQuick">
                        <a href="#"><strong>WELCOME</strong></a>
                    </li>
                </ul>
                <ul class="nav navbar-nav-custom pull-right">
                    <!-- User Dropdown -->
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="../static/img/0.jpg" alt="avatar" style="border-style: none;">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li class="dropdown-header">
                                <strong th:text="${user.name}"></strong>
                            </li>
                            <li>
                                <a th:href="@{/user/toPwd(id=${user.id})}" onclick="App.sidebar('toggle-sidebar-alt');">
                                    <i class="gi gi-settings fa-fw pull-right"></i>
                                    修改密码
                                </a>
                            </li>
                            <li>
                                <a th:href="@{/toLock(id=${user.id})}">
                                    <i class="gi gi-lock fa-fw pull-right"></i>
                                    锁屏
                                </a>
                            </li>
                            <li>
                                <a th:href="@{/}">
                                    <i class="fa fa-power-off fa-fw pull-right"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                    <!-- END User Dropdown -->
                </ul>
                <!-- END Right Header Navigation -->
            </header>
            <!-- END Header -->


    <!--main-->
    <div style="background-color:#fff;width: auto;height: 720px;padding-top: 100px;" >
        <div style="width: 1000px;height: 100%;margin:0 auto">
            <form>
                <fieldset>
                    <legend><strong>图书管理系统</strong></legend>
                    <div class="container" >
                        图书管理系统将权限一分为二，分别是管理员权限和员工权限，接下来将为你展示两种权限所对应的功能。
                        <fieldset>
                            <legend>管理员</legend>
                            <!--选项卡-->
                            <ul class="nav nav-tabs">
                                <li><a href="#pan1" data-toggle="tab">图书管理</a></li>
                                <li><a href="#pan2"  data-toggle="tab">用户管理</a></li>
                                <li><a href="#pan3"  data-toggle="tab">借还管理</a></li>
                                <li><a href="#pan4"  data-toggle="tab">修改密码</a></li>
                            </ul>
                            <!--面板-->
                            <div class="tab-content">
                                <div class="tab-pane active" id="pan1">
                                    添加图书：书名、作者、出版社、ISBM、简介、价格、出版日期、分类、数量<br>
                                    查询图书：根据书名或分类查询<br>
                                    删除图书：点击删除按钮即可<br>
                                    修改图书：点击修改按钮即进入修改界面
                                </div>
                                <div class="tab-pane" id="pan2">
                                    添加用户：根据角色添加用户或者管理员<br>
                                    用户管理：对存在的用户或管理员进行删除，修改，查询
                                </div>
                                <div class="tab-pane" id="pan3">
                                    用户借还书自动添加信息，如果超过指定日期，会显示催还按钮
                                </div>
                                <div class="tab-pane" id="pan4">
                                    对自己的登录密码进行修改，修改成功后退出系统到login页面
                                </div>
                            </div>
                        </fieldset>


                        <fieldset>
                            <legend>读者</legend>
                            <!--选项卡-->
                            <ul class="nav nav-tabs">
                                <li><a href="#pan5" data-toggle="tab">图书查询</a></li>
                                <li><a href="#pan6"  data-toggle="tab">个人信息</a></li>
                                <li><a href="#pan7"  data-toggle="tab">我的借还</a></li>
                                <li><a href="#pan8"  data-toggle="tab">图书挂失</a></li>
                                <li><a href="#pan9"  data-toggle="tab">修改密码</a></li>
                            </ul>
                            <!--面板-->
                            <div class="tab-content">
                                <div class="tab-pane active" id="pan5">
                                    根据书名或者分类进行查询
                                </div>
                                <div class="tab-pane" id="pan6">
                                    查看个人详细信息：读者号、姓名、用户名、性别、生日、地址、电话、角色
                                </div>
                                <div class="tab-pane" id="pan7">
                                    我想还书：显示所有未还图书以及图书状态，如果图书超期或者到应还日期前15天，才能进行续借<br>
                                    借还记录：显示所有已还图书和用户丢失图书进行赔偿的图书借还日志
                                </div>
                                <div class="tab-pane" id="pan8">
                                    挂失：显示读者所有未还图书，附带挂失按钮，点击挂失
                                    解挂：解挂 赔偿
                                </div>
                                <div class="tab-pane" id="pan9">
                                    对自己的登录密码进行修改，修改成功后退出系统到login页面
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

        </div>
        <!-- Sidebar Extra Info -->
        <div id="sidebar-extra-info" class="sidebar-content sidebar-nav-mini-hide">

            <div class="progress progress-mini push-bit">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
            </div>
            <div class="text-center">
                <small>Crafted with <i class="fa fa-heart text-danger"></i> by <a href="#" target="_blank">***</a></small><br>
                <small><span>2022-12</span> &copy; <a href="#">***</a></small>
            </div>
        </div>
        <!-- END Sidebar Extra Info -->
    </div>
</div>
<!-- END Main Container -->

<script src="../static/js/vendor/jquery-2.2.4.min.js"></script>
<script src="../static/js/vendor/bootstrap.min.js"></script>
<script src="../static/js/plugins.js"></script>
<script src="../static/js/app.js"></script>
<script src="../static/js/pages/readyDashboard.js"></script>
<script>$(function(){ ReadyDashboard.init(); });</script>
</body>
</html>